<template>
  <div class="reg">
    <div class="head">
      <span>注册</span>
      <a class="arrow-left backpage" href="###" @click="goto('/login')">登录</a>
    </div>
    <div class="main">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="formName"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="ruleForm.username" @blur="bluruid"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="regbtn" @click="submitForm('ruleForm')">注册</div>
  </div>
</template>

<script>
import Qs from "qs";
export default {
  data: function() {
    //验证用户名是否存在
    var checkName = async (rule, value, callback) => {
      let { data } = await this.$axios.get(
        "http://119.23.142.232:11291/usersnew/check",
        {
          params: {
            name: this.ruleForm.username
          }
        }
      );
      if (data.code == 1) {
        //可以注册
        callback();
      } else {
        //不能注册
        callback(new Error("用户名已存在!"));
      }
    };
    //验证密码和确认密码
    var checkPass = (rule, value, callback) => {
      if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    //添加uid自增1
    // 用户uid
    // var uid = async (value, callback) => {

    //   let { data } = await this.$axios.get(
    //     "http://119.23.142.232:11291/usersnew/check"
    //   );
    //   window.console.log(data)
    //   uid = data.data.length + 1;
    //   // window.console.log(uid)
    //   if (data.data.uid) {
    //     //可以注册
    //     callback();
    //   }
    // };
    return {
      ruleForm: {
        username: "",
        password: "",
        checkPass: "",
        uid: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { validator: checkName, trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
        ],
        checkPass: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: checkPass, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    goto(path) {
      this.$router.push(path);
    },
    open2() {
      this.$message({
        message: "注册成功",
        type: "success"
      });
    },
    open4() {
      this.$message.error("注册失败");
    },
    async bluruid() {
      let { data } = await this.$axios.get(
        "http://119.23.142.232:11291/usersnew/check"
      );
      // window.console.log(data)
      this.ruleForm.uid = data.data.length + 1;
      // window.console.log(this.ruleForm.uid)
    },
    submitForm() {
      // window.console.log(this.ruleForm)

      // window.console.log(this.ruleForm.length);
      // window.console.log(this.ruleForm.uid)
      this.$refs.formName.validate(async valid => {
        if (valid) {
          // alert("注册成功!");

          //需求：发起请求，实现注册功能
          let { username: name, password, uid } = this.ruleForm;
          var datastr = Qs.stringify({ name, password, uid });
          // window.console.log(datastr)
          let { data } = await this.$axios.post(
            "http://119.23.142.232:11291/usersnew/reg",
            datastr,
            {
              headers: { "Content-Type": "application/x-www-form-urlencoded" }
            }
          );

          //成功就跳转到登录页并把用户名带过去
          if (data.code) {
            this.open2();
            this.$router.push({
              name: "my",
              query: { name },
              params: { name }
            });
          } else {
            this.open4();
            alert("注册失败");
          }
        } else {
          // window.console.log("注册失败!!");
          this.open4();
          return false;
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.reg {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  .head {
    width: 100%;
    background: #fff;
    position: relative;
    span {
      font-size: 0.426667rem;
      line-height: 1.053333rem;
      border-bottom: 0.013333rem solid #e5e5e5;
    }
    a {
      position: absolute;
      left: 0.266667rem;
      font-size: 0.426667rem;
      line-height: 1.04rem;
      color: #000;
    }
  }
  .main {
    width: 8rem;
    margin: auto;
    margin-top: 0.666667rem;
  }
  .regbtn {
    margin: auto;
    margin-top: 0.8rem;
    width: 8rem;
    height: 1.333333rem;
    background: #000;
    color: #fff;
    font-size: 0.4rem;
    line-height: 1.333333rem;
  }
  .arrow-left::before {
    border-left: 0.053333rem solid #000;
    border-top: 0.053333rem solid #000;
    content: "";
    display: inline-block;
    height: 12px;
    transform: rotate(-45deg);
    vertical-align: middle;
    width: 12px;
  }
}
</style>